import Header from './Header.jsx'
import CartOverview from '../features/cart/CartOverview.jsx'
import { Outlet, useNavigation } from 'react-router-dom'
import Loader from './Loader.jsx'

export default function AppLayout() {
  const navigation = useNavigation()
  const isLoading = navigation.state !== 'idle'

  return (
    <div className="grid h-screen grid-rows-[auto,1fr,auto]">
      {isLoading && <Loader />}

      <Header />

      <div className="my-10 overflow-scroll">
        <main className="mx-auto max-w-3xl">
          <Outlet />
        </main>
      </div>

      <CartOverview />
    </div>
  );
}